<template>
    <div ref="dialog" class="bpm-dialog" v-if="data.isVisible">
        <div class="bpm-dialog-title">
            <i :class="icon" style="margin-right: 5px" v-if="icon"></i>
            <div class="bpm-dialog-close" @click.prevent="close()" @mousedown.stop="onCloseMouseDown">
                <el-icon style="font-size:20px;margin-top:7px;">
                    <Close />
                </el-icon>
            </div>
            <div style="float:left">{{ data.title }}</div>
        </div>
        <div class="bpm-dialog-body">
            <!-- <keep-alive> -->
            <slot v-if="data.isVisible"></slot>
            <!-- </keep-alive> -->
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, nextTick, reactive } from 'vue'
import bpm from "../common/bpm.js"

const data = reactive({
    title: null,
    isVisible: false,
    isInitiated: false,
});

let top: String;
let left: String;
let isInitiated: boolean = false;

const dialog: any = ref(null);

const props = defineProps({
    width: { type: String, default: "100px" },
    height: { type: String, default: "160px" },
    icon: String,
});

const init = () => {
    var bodyWidth = 0;
    var bodyHeight = 0;
    if (bpm.isPercent(props.width)) {
        bodyWidth =
            (bpm.parseFloat(
                props.width.toString().replace("%", "")
            ) /
                100) *
            document.documentElement.clientWidth -
            4;
    } else {
        let temp = props.width;
        if (temp.indexOf("px") > -1) {
            temp = temp.replace("px", "");
        }
        bodyWidth = bpm.parseFloat(temp) - 4;
    }
    if (bpm.isPercent(props.height)) {
        bodyHeight =
            (bpm.parseFloat(
                props.height.toString().replace("%", "")
            ) /
                100) *
            document.documentElement.clientHeight -
            40;
    } else {
        let temp = props.height;
        if (temp.indexOf("px") > -1) {
            temp = temp.replace("px", "");
        }
        bodyHeight = bpm.parseFloat(temp) - 40;
    }
    if (bodyWidth < 80) {
        bodyWidth = 80;
    } else if (bodyWidth > document.documentElement.clientWidth) {
        bodyWidth = document.documentElement.clientWidth - 40;
    }
    if (bodyHeight < 80) {
        bodyHeight = 80;
    } else if (bodyHeight > document.documentElement.clientHeight) {
        bodyHeight = document.documentElement.clientHeight - 4;
    }
    dialog.value.childNodes[1].style.height = bodyHeight + "px";
    dialog.value.childNodes[1].style.width = bodyWidth + "px";
    top =
        (document.documentElement.clientHeight - bodyHeight - 40) / 2.6 + "px";
    left =
        (document.documentElement.clientWidth - bodyWidth - 4) / 2 + "px";
    dialog.value.style.top = top;
    dialog.value.style.left = left;
    bpm.attachEvent(
        dialog.value.childNodes[0],
        "mousedown",
        function (event: any) {
            bpm.onMouseDown(event, this, function (event) {
                //开始移动
                bpm.adorner = {
                    initX: event.clientX,
                    initY: event.clientY,
                    ui: (event.target || event.srcElement).parentNode,
                    target: event.target || event.srcElement,
                };
                bpm.adorner.mask = bpm.createElement("div", null, {
                    position: "absolute",
                    left: "0px",
                    top: "0px",
                    width: "100%",
                    height: "100%",
                    backgroundColor: "transparent",
                });
                (event.target || event.srcElement).parentNode.appendChild(
                    bpm.adorner.mask
                );
                bpm.attachEvent(
                    (event.target || event.srcElement).ownerDocument.body,
                    "mousemove",
                    bpm.Dialog.onMouseMove
                );
                bpm.attachEvent(
                    (event.target || event.srcElement).ownerDocument.body,
                    "mouseup",
                    bpm.Dialog.onMouseUpOrLeave
                );
                bpm.attachEvent(
                    (event.target || event.srcElement).ownerDocument.body,
                    "mouseout",
                    bpm.Dialog.onMouseUpOrLeave
                );
            });
        }
    );
    //注册拖拽事件
    bpm.attachEvent(dialog.value, "mouseout", function (ev) {
        bpm.stopBubble(ev);
    });
    if (isInitiated) {
        return;
    }
    isInitiated = true;
    document.body.appendChild(dialog.value);
}

const show = (title: any, afterAction: Function) => {
    //计算宽高
    data.title = title;
    data.isVisible = true;
    nextTick(() => {
        init();
        showMask();
        dialog.value.style.top = top;
        dialog.value.style.left = left;
        dialog.value.style.zIndex =
            1000 + bpm.Dialog.getCounter(window) * 2 - 1;
        afterAction && afterAction();
    });
};

const setTitle = (title) => {
    data.title = title;
}

const showMask = () => {
    bpm.Dialog.showMask(window);
};

const hideMask = () => {
    bpm.Dialog.hideMask(window);
};

const onCloseMouseDown = () => {
}

const close = () => {
    data.isVisible = false;
    hideMask();
};

const isVisible = () => {
    return data.isVisible;
}

defineExpose({ show, close, isVisible, setTitle });

</script>